<template>
  <div>
    <van-sticky style="background: #fff">
      <van-row>
        <van-col>
          <img class="logo" src="../assets/logo1.png" alt="" />
        </van-col>
        <van-col>
          <van-search
            class="search"
            v-model="value"
            placeholder="请输入搜索关键词"
          />
        </van-col>
        <van-col>
          <van-button class="login_button" to="/login" plain type="info">登录</van-button>
        </van-col>
      </van-row>
      <!-- 分类滚动 -->
      <van-tabs>
        <van-tab v-for="(n, inx) in tabBtnList" :key="inx" :title="n">
          <!-- 内容 {{ n }} -->
        </van-tab>
      </van-tabs>
    </van-sticky>
    <!-- 图片轮播 -->
    <van-swipe :autoplay="3000" :height="180">
      <van-swipe-item v-for="(n, inx) in imgObj" :key="inx">
        <img :src="n" />
      </van-swipe-item>
    </van-swipe>
    <!-- 展示 -->
    <van-grid direction="horizontal" :column-num="3" :gutter="15">
      <van-grid-item v-for="(n, inx) in goodsObj" :key="inx">
        <img class="goodsImg" :src="n.goodsImg" />
        <div class="goodstxt">{{ n.goodstxt }}</div>
      </van-grid-item>
    </van-grid>
    <!-- 猜你喜欢 -->
    <div class="xh_div">
      <img
        class="xhimg"
        src="https://img.alicdn.com/tfs/TB1V2eQrKSSBuNjy0FlXXbBpVXa-966-114.png"
        alt=""
      />
    </div>
    <!-- 商品列表 -->
    <van-grid :center="false" :border="false" :column-num="3" :gutter="15">
      <van-grid-item v-for="(n, inx) in goodsList" :key="inx">
        <img style="width: 1.5rem" :src="n.goodsImg" />
        <div style="font-size: 0.2rem">{{ n.goodstxt }}</div>
        <span style="font-size: 0.2rem">{{ n.price }}</span>
      </van-grid-item>
    </van-grid>
    <!-- footer -->
    <div style="background: gray; text-align: center; height: 3rem">
      <p>页底</p>
    </div>
    <!-- foot -->
    <footer_bar></footer_bar>
    <!-- 下拉刷新 -->
    <!-- <van-pull-refresh
  v-model="isLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
  style="min-height: 100vh;"
>
  <p></p>
</van-pull-refresh> -->
  </div>
</template>

<script>
import axios from "axios";
import footer_bar from "./footer_bar.vue";

export default {
  name: "app_index",
  data() {
    return {
      search_v: "",
      tabBtnList: "",
      imgObj: [
        "https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg",
        "https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg",
        "https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg",
      ],
      goodsObj: [
        {
          goodsImg:
            "https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1",
          goodstxt: "新人发布",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1",
          goodstxt: "多人选择",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1",
          goodstxt: "信任商品",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1",
          goodstxt: "低价出售",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1",
          goodstxt: "商品名称",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1",
          goodstxt: "商品名称",
        },
      ],
      active: "1",
      goodsList: [
        {
          goodsImg:
            "https://gw.alicdn.com/bao/uploaded/i2/1036817980/TB2ZSSfewvD8KJjy0FlXXagBFXa_!!1036817980.jpg_320x320q90.jpg_.webp",
          goodstxt: "商品名称",
          price: "￥4399",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/bao/uploaded/i2/1036817980/TB2ZSSfewvD8KJjy0FlXXagBFXa_!!1036817980.jpg_320x320q90.jpg_.webp",
          goodstxt: "商品名称",
          price: "￥4399",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/bao/uploaded/i2/1036817980/TB2ZSSfewvD8KJjy0FlXXagBFXa_!!1036817980.jpg_320x320q90.jpg_.webp",
          goodstxt: "商品名称",
          price: "￥4399",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/bao/uploaded/i2/1036817980/TB2ZSSfewvD8KJjy0FlXXagBFXa_!!1036817980.jpg_320x320q90.jpg_.webp",
          goodstxt: "商品名称",
          price: "￥4399",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/bao/uploaded/i2/1036817980/TB2ZSSfewvD8KJjy0FlXXagBFXa_!!1036817980.jpg_320x320q90.jpg_.webp",
          goodstxt: "商品名称",
          price: "￥4399",
        },
        {
          goodsImg:
            "https://gw.alicdn.com/bao/uploaded/i2/1036817980/TB2ZSSfewvD8KJjy0FlXXagBFXa_!!1036817980.jpg_320x320q90.jpg_.webp",
          goodstxt: "商品名称",
          price: "￥4399",
        },
      ],
      isLoading: false,
    };
  },
  // http://localhost:6632/get_tablist
  components: { footer_bar },
  created() {
    axios.get("http://localhost:6632/get_tablist").then((_d) => {
      console.log(_d);
      this.tabBtnList=_d.data
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-row {
  background: #fff;
}
.van-col {
  text-align: center;
}
.logo {
  width: 1.2rem;
  /* display:inline-block; */
  margin: 0.2rem 0 0 0.2rem;
  float: left;
}
.search {
  width: 3.5rem;
  margin: 0.1rem 0 0 0.1rem;
  padding: 0;
  border: 0;
}
.van-search__content {
  border-radius: 0.2rem;
}
.login_button {
  padding: 0;
  width: 0.8rem;
  height: 0.43rem;
  float: left;
  margin: 0.2rem 0 0 0.2rem;
  line-height: 0.43rem;
  text-align: center;
  font-size: 0.22rem;
  border-radius: 0.1rem;
  border: 1px solid;
}
.goodsImg {
  width: 1rem;
}
.goodstxt {
  font-size: 0.2rem;
}
.xhimg {
  height: 0.3rem;
}
.xh_div {
  text-align: center;
  height: 1rem;
}
</style>
